ad

Friday, December 5, 2025

How to Use the HTML iframe Tag with Examples

How to Use the HTML iframe Tag with Examples

web designing theory

This Blog You Will Learn 

ஃ what  is the <iframe> tag?

ஃ Why Use the <iframe> Tag ?

ஃ Important <iframe> Attributes

ஃ Syntax of HTML <iframe> tag

ஃ Explain Program

ஃ Output

what  is the <iframe> tag?

✅ HTML <iframe> tag  used to embed another  webpage 

✅ <iframe> tag external  content inside a webpage.

✅ <iframe> tag stands for lnline frame.

✅ use embed an external document or webpage within the current HTML document.

✅ HTML <iframe> tag use to display  another webpage or external content inside a webpage.

✅ <iframe> tag use display content such as maps,videos,documents websites.

Why Use the <iframe> Tag ?

 ✔  Display external websites.

 ✔  Embed YouTube videos.

 ✔  Show Google Maps.

 ✔  Load third-party content.

Advantages of <iframe> tag

  • Easy to embed external content.
  • keep users on your page.
  • Save development time.

Important <iframe> Attributes

 1) src (source)


  <iframe src="https://webdesigningtheory.blogspot.com"> </iframe>

 specifies URL of webpage or content to be embedded inside the <iframe> tag.

2) width 

Defines the width of the <iframe> tag


  <iframe src="index.html" width="500"></iframe>

3) height

Defines the height of the iframe


  <iframe src="https://webdesigningtheory.blogspot.com" height ="400"></iframe>

4) title

text description  of the iframe for screen readers.


  <iframe src="https://webdesigningtheory.blogspot.com"
title="web designing theory blog"></iframe>

5) allowfullscreen

Allows embedded content (like videos)  fullscreen


  <iframe src="https://webdesigningtheory.blogspot.com" allowfullscreen></iframe>

6)  loading

 controls how the iframe is loaded.


  <iframe src="https://webdesigningtheory.blogspot.com" loading="lazy"></iframe>

 values:- 

lazy - loads only when needed  

eager - loads immediately

7) sandbox ( security attribute)

 adds security restrictions to the frame content.


  <iframe src="https://webdesigningtheory.blogspot.com"
sandbox="allow-scripts allow-forms" ></iframe>

8)  referrerpolicy

controls what referrer information is sent


  <iframe src="https://webdesigningtheory.blogspot.com"
referrerpolicy="no-referrer"></iframe>

 improves privacy and security 

9) allow 


  <iframe src="https://webdesigningtheory.blogspot.com"
allow="autoplay;></iframe>

 controls access to browser features (camera microphone etc)

 Syntax of HTML <iframe> tag


<iframe src="URL">
.
.
. 
</iframe>

  • <iframe> tag in HTML use to embed another webpage or external content inside webpage.
  • HTML  <iframe> tag  inline frame tag.   
  • HTML <iframe> tag allows display separate html page small window on your current page.
  • HTML  <iframe> tag embed example :- YouTube videos, Ads, webpages, Twitter, TikTok video, Pinterest Pin ,Facebook

How to Use the HTML iframe Tag with Examples
Example 

<!DOCTYPE html>
<html>
<head>
     
  <title> HTML iframe tag</title>

    </head>
    <body>
<h1> webdesigningtheory.blogspot.com</h1>
 
      <h2> learn HTML iframe Tag</h2>
        <iframe src="https://webdesigningtheory.blogspot.com"
title="Web designing theory free online blogspot web Tutorial">
</iframe>
       
    </body>
</html>

How to Use the HTML iframe Tag with Examples

Explain Program

Step  1] 

<!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html

Step 2 ]

<html>.... . </html>

  • html is the root element of the html page.
  •  Every thing inside it is part of the webpage.

Step 3]

<head>
     
  <title> HTML iframe tag </title>

    </head>

  •   <head>  section 
  •   head section contains metadata about page. not visible on the page itself.
  •  <title> tag  title section set the title of the page shows the browser tab.

Step 4]

<body>

  • < body> tag  contains all the content visible to webpage.
  • <body> tag contains  all the visible content of the page.
  • inside <body> show the browser screen.

Step 5]


<h1> webdesigningtheory.blogspot.com</h1>
 
    <h2> learn HTML iframe tag</h2>

  • <h1> tag heading  tag use for main title on webpage .
  • <h2> tag subheading  of page.

Step 6]

 <iframe src="https://webdesigningtheory.blogspot.com"
title="Web designing theory free online blogspot web Tutorial ">
</iframe>
       

  •  <iframe>.....</iframe>
  • The iframe tag is use to embed another webpage inside webpage.
  •   title :-  provides text description  of iframe content.
  •  helps seo browser understanding.

Step 7]

closing the Tag


</body>

 </html>

How to Use the HTML iframe Tag with Examples
Output

How to Use the HTML iframe Tag with Examples



Labels: ,